﻿<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<link href="/LiberUI/Style/LiberUI.css" rel="stylesheet" />
<link href="/SiteUI/Base.css" rel="stylesheet" />
<link href="/SiteUI/Register/Register.css" rel="stylesheet" />
<title>天联云-账号注册</title>
<html>

<body>
    <div class="view" id="headBar">
        <div class="row">
            <div class="col-lg-5 col-lg-offset-1" id="siteLogo">

            </div>
            <div class="col-lg-6" id="siteLink">
                <a href="/Index.html">首页</a>
                <a href="/Products.html">采购云协同</a>
                <a href="/BizCase.html">案例</a>
                <a href="/AboutUS.html">关于我们</a>
            </div>
        </div>
    </div>
    <div class="view_fix" id="viewOpenUser">
        <div class="row">
            <div class="col-lg-1 col-lg-offset-3">
                <img id="userInfo_headImg" src="SiteUI/Imgs/acntOk.png"  />
            </div>
            <div class="col-lg-5" id="userInfoTxt">
                <h3 id="userInfo_name">用户名</h3>
                <h4 id="userInfo_tip">欢迎加入天联云</h4>
                <h6 id="userInfo_prompt">请完善您的账号信息。如果已有平台账号，请<a id="lnkBindAcnt" class="LinkTo" href="/BindAcnt.html">登录并绑定</a></h6>
            </div>
        </div>
    </div>
    <div class="view_fix" id="viewRegister">
        <div class="row step1" id="vr-steps1"></div>
        <div class="row" id="vr-tip">
            本平台面向企业间协同办公，为保证数据安全，请使用合法的手机号码注册账号
        </div>
        <div class="row" id="vr-mphone"> 
            <div class="col-lg-4 col-lg-offset-4">
                <h5>手机号码：</h5>
                <input maxlength="11" id="txbMPhone" placeholder="请输入手机号码"/>
                
            </div>
            <div class="col-lg-4">
                <h5>&nbsp;</h5>
                <div class="inputTip" id="it-phone"></div>
            </div>
        </div>
        <div class="row" id="vr-captcha">
            <div class="col-lg-4 col-lg-offset-4">
                <div class="l-captcha" data-site-key="5721304f6096b88278069a248b9d0a8c" data-width="100%" data-callback=imgValidateEnd id="validator" ></div>
                <br />
            </div>
            <div class="col-lg-2 col-lg-offset-4">
                <h5>短信验证：</h5>
                <input maxlength="10" id="txbCaptcha"/>               
            </div>
            <div class="col-lg-2" id="btnSendCaptcha">
                <h5>&nbsp;</h5>
                <div class="button">免费获取验证码</div>
            </div>
            <div class="col-lg-4">
                <h5>&nbsp;</h5>
                <div class="inputTip" id="it-captcha"></div>
            </div>
        </div>
        <div class="row" id="vr-acnt">
            <div class="col-lg-4 col-lg-offset-4">
                <h5>登录密码：</h5>
                <input maxlength="30" id="txbPassword" type="password" placeholder="请设置您的登录密码"/>
                <h5>确认密码：</h5>
                <input maxlength="30" type="password" id="txbConfirmPwd" placeholder="请再次输入登录密码"/>
            </div>
            <div class="col-lg-4">
                <h5>&nbsp;</h5>
                <div class="inputTip" id="it-pwd"></div>
                <h5>&nbsp;</h5>
                <div class="inputTip" id="it-confirmpwd"></div>
            </div>
            <a class="LinkTo col-lg-4 col-lg-offset-4" target="_blank" href="/Agreement.html">点击‘下一步’意味着您已阅读并同意《用户协议》</a>
            <div class="col-lg-4 col-lg-offset-4 button btn-big" id="btnCreateAcnt">
                下一步
            </div>
        </div>
    </div>
    <div class="view" id="pageFoot">

    </div>
    <script src="LiberUI/Scripts/jquery.js"></script>
    <script src="LiberUI/Scripts/LiberUI.Base.js"></script>
    <script src="LiberUI/Scripts/LiberUI.js"></script>
    <script src="LiberUI/Scripts/LiberUI.Action.js"></script>
    <!--<script src="https://static.geetest.com/static/tools/gt.js"></script>-->
    <script src="//captcha.luosimao.com/static/dist/api.js"></script>
    <script src="SiteUI/res_sobiz.js"></script>
    <script>
        var Register = {
            NewAcnt: {
                src: null,
                phone: null,
                captcha: null,
                pass: null,
                name: null,
                headImg: null,
                openid: null,
                openname: null
            },
            PhoneFormat: /^1[3,4,5,7,8]{1}[0-9]{9}$/,  //手机号格式验证的正则
            Countdown: 0,//倒计时秒数
            CountdownHandler: null,  //倒计时器
            BtnSendCaptcha: new LiberUI.Button("#btnSendCaptcha>.button"),
            sendCaptcha: function () {
                //检查图形验证
                //var imgV = Register.imgValidator.getValidate();
                var imgV = Register.imgValidator;
                if (!imgV) {
                    error("错误", "请先完成人机识别认证", 5);
                    return;
                }

                //TODO:检查发送间隔
                if (Register.Countdown <= 0 && Register.checkPhone() === true) {
                    Register.Countdown = 60;
                    Register.NewAcnt.phone = $("#txbMPhone").vl();
                    //$.getJSON("/Register/SendCaptcha", { phone: Register.NewAcnt.phone, forwhat: "newacnt", challenge: imgV.geetest_challenge, validate: imgV.geetest_validate, seccode: imgV.geetest_seccode }, Register.sendCaptchaEnd);
                    $.getJSON("/Register/SendCaptcha", { phone: Register.NewAcnt.phone, forwhat: "newacnt", validate: imgV}, Register.sendCaptchaEnd);
                    Register.BtnSendCaptcha.disable();
                    $("#txbCaptcha").focus();
                    Register.CountdownHandler = setTimeout(Register.countInterval, 1000);
                }
            },
            countInterval: function (ev) {
                if (Register.Countdown > 0) {
                    Register.Countdown = Register.Countdown - 1;
                    Register.BtnSendCaptcha.vl("[" + Register.Countdown + "]秒后重新获取");
                    Register.CountdownHandler = setTimeout(Register.countInterval, 1000);
                }
                else {
                    Register.Countdown = 0;
                    Register.BtnSendCaptcha.enable().vl("免费获取验证码");
                }
            },
            checkPhone: function () {
                var p = $("#txbMPhone").vl();
                if (!Register.PhoneFormat.test(p)) {
                    $("#it-phone").vl("请输入正确的手机号码").addClass("error");
                    $("#txbMPhone").select();
                    return false;
                }
                else {
                    $("#it-phone").removeClass("error").vl("");
                    return true;
                }
            },
            sendCaptchaEnd: function (rtn) {
                //TODO:处理发送验证码结果
                if (rtn.IsPositive) {
                    success("发送成功", "验证码已发送，5分钟内有效");
                    $("#it-captcha").removeClass("info,success,error").addClass("success").vl("验证码已发送");
                    $("#vr-acnt").fadeIn();
                }
                else {
                    clearTimeout(Register.CountdownHandler);
                    Register.Countdown = 0;
                    Register.BtnSendCaptcha.enable().vl("免费获取验证码");
                    $("#it-captcha").removeClass("info,success,error").addClass("error").vl(ErrFormate(res_sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error));
                }
            },
            checkPwd: function () {
                var p = $("#txbPassword");
                if (p.val().length >= 6 && p.vl().indexOf(" ") == -1) {
                    $("#it-pwd").vl("").removeClass("error,info,success");
                    return true;
                } else {
                    $("#it-pwd").vl("密码至少为6位数").addClass("error");
                    return false;
                }
            },
            checkConfirmPwd: function () {
                var p = $("#txbPassword");
                var cp = $("#txbConfirmPwd");
                if (cp.vl() !== p.vl()) {
                    $("#it-confirmpwd").vl("您两次输入的密码不一致").removeClass("error,info,success").addClass("error");
                    return false;
                }
                else {
                    $("#it-confirmpwd").vl("").removeClass("error,info,success");
                    return true;
                }
            },
            createAcnt: function (ev) {
                if (Register.checkPhone() & Register.checkPwd() & Register.checkConfirmPwd()) {
                    Register.NewAcnt.pass = $("#txbConfirmPwd").vl();
                    Register.NewAcnt.captcha = $("#txbCaptcha").vl();
                    $("#btnCreateAcnt").vl("正在创建账号...").off("click", Register.createAcnt);
                    $.post("/Register/CreateAcnt", Register.NewAcnt, Register.createAcntEnd);
                }
            },
            createAcntEnd: function (rtn) {
                if (rtn.IsPositive) {
                    $.post("/SoBiz/Login", { 'key': Register.NewAcnt.phone, 'pass': Register.NewAcnt.pass, 'opensrc': Register.NewAcnt.src }, function (rtn) {
                        if (rtn.IsPositive) {
                            $.Cookie("newphone", Register.NewAcnt.phone, { expire: 30 });
                            success("成功", "已为您创建账号，接下来将转到实名认证界面", 5, function () { window.location = "/AcntCertify.html"; });
                        }
                    });
                }
                else {
                    //TODO:创建账号失败
                    error("失败", "抱歉，" + ErrFormate(res_sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error), 5, function () {
                        $("#btnCreateAcnt").vl("下一步").on("click", Register.createAcnt);
                    });
                }
            },
            getWxUserInfoEnd: function (rtn) {
                if (rtn.IsPositive == false) {
                    setTimeout(function () { $.getJSON("/TLB2B/GetUserInfo", {}, Register.getWxUserInfoEnd); }, 500);
                }
                else {
                    $("#viewOpenUser").fadeIn();
                    var uinfo = JSON.parse(JSON.parse(rtn.Data));
                    Register.NewAcnt.name = uinfo.nickname;
                    Register.NewAcnt.headImg = uinfo.headimgurl;
                    Register.NewAcnt.src = "wechat";
                    Register.NewAcnt.openid = uinfo.openid;
                    Register.NewAcnt.openname = uinfo.nickname;

                    $("#userInfo_headImg").attr("src", Register.NewAcnt.headImg);
                    $("#userInfo_name").vl(Register.NewAcnt.name);
                    $("#userInfo_tip").vl("欢迎，您已使用微信帐号登录");
                }
            },
            //getValidator: function () {
            //    $.ajax({
            //        // 获取id，challenge，success（是否启用failback）
            //        url: "/Register/GetValidator",
            //        type: "get",
            //        dataType: "json", // 使用jsonp格式
            //        success: function (rtn) {
            //            // 使用initGeetest接口
            //            // 参数1：配置参数，与创建Geetest实例时接受的参数一致
            //            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            //            var data = JSON.parse(rtn.Data);
            //            initGeetest({
            //                gt: data.gt,
            //                challenge: data.challenge,
            //                product: "float", // 产品形式
            //                offline: !data.success
            //            }, function (captchaObj) {
            //                Register.imgValidator = captchaObj;
            //                captchaObj.appendTo("#validator");
            //            });
            //        }
            //    });
            //}
        };
        function imgValidateEnd(rtn) {
            Register.imgValidator = rtn;
        };
        $(function () {      
            //元素失去焦点触发
            $("#txbMPhone").blur(Register.checkPhone);
            $("#txbPassword").blur(Register.checkPwd);
            $("#txbConfirmPwd").blur(Register.checkConfirmPwd);
            //判断是否为通过第三方账号登录
            var frm = getUrlParam("from");
            if (frm != null) {
                $("#lnkBindAcnt").attr("href", "/BindAcnt.html?from=" + frm);
                switch (frm) {
                    case "wechat":
                        //加载微信用户信息
                        $.getJSON("/TLB2B/GetUserInfo", {}, Register.getWxUserInfoEnd);
                        break;
                }
            }
            
            $("#pageFoot").load("/common/pageFoot.html");

            Register.BtnSendCaptcha.on("click", Register.sendCaptcha);
            $("#txbMPhone").focus();
            $("#btnCreateAcnt").on("click", Register.createAcnt);

            KeybordHelper.on($("#txbConfirmPwd"), "enter", Register.createAcnt);
        })
    </script>


    <div id="tplPrompt" style="display:none">
        <div class="prompt_success">
            <div class="p_body">
                <h4>title</h4>
                <span>message</span>
            </div>
        </div>
        <div class="prompt_info">
            <div class="p_body">
                <h4>title</h4>
                <span>message</span>
            </div>
        </div>
        <div class="prompt_err">
            <div class="p_body">
                <h4>title</h4>
                <span>message</span>
            </div>
        </div>
    </div>
   
    <script>
    window.success = function (title,msg, delay, fnCallback) {
        var cnt = $("#tplPrompt>.prompt_success").clone();
        cnt.children(".p_body").children("h4").vl(title);
        cnt.children(".p_body").children("span").vl(msg);
        var p = new LiberUI.Prompt(cnt);
        p.option("Delay", delay);
        p.update();
        if (ObjHelper.IsFunc(fnCallback)) {
            p.on("disposed", fnCallback);
        }
        return p.show();

    };
    window.info = function (title,msg, delay,fnCallback) {
        var cnt = $("#tplPrompt>.prompt_info").clone();
        cnt.children(".p_body").children("h4").vl(title);
        cnt.children(".p_body").children("span").vl(msg);
        var p = new LiberUI.Prompt(cnt);
        p.option("Delay", delay);
        p.update();
        if (ObjHelper.IsFunc(fnCallback)) {
            p.on("disposed", fnCallback);
        }
        return p.show();
    };
    window.error = function (title, msg, delay, fnCallback) {
        var cnt = $("#tplPrompt>.prompt_err").clone();
        cnt.children(".p_body").children("h4").vl(title);
        cnt.children(".p_body").children("span").vl(msg);
        var p = new LiberUI.Prompt(cnt);
        p.option("Delay", delay);
        p.update();
        if (ObjHelper.IsFunc(fnCallback)) {
            p.on("disposed", fnCallback);
        }
        return p.show();
    };

    window.log = function (msg) {
        if (console) {
            console.log(msg);
        }
    };

    </script>
</body>
</html>



